<template>
	<view class="c-wrap">
		<u-popup v-model="showPopup" mode="right" z-index="10088">
			<view class="pop" :style="[customstyle]">
				<view class="pop-header app_flex-aicjcsb">
					<view class="pop-header-L">产品筛选</view>
					<view class="pop-header-R">
						<u-checkbox shape="circle"></u-checkbox>
						<text>全选</text>
					</view>
				</view>
				<scroll-view class="pop-main" scroll-y>
					<template v-if="typeList && typeList.length>0">
						<view class="pop-item" v-for="(item, index) in typeList" :key="index">
							<item class="pop-item-title app_flex-aic app_arrow">
								<u-checkbox shape="circle">{{item.typeTitle}}</u-checkbox>
							</item>
						</view>
						<view class="pop-item-main">
							<view class="pop-item-main_item" :class="{active: index == 0 || index == 1}"
								v-for="(item, index) in typeListChildren" :key="index">{{item.typeTitle}}
							</view>
						</view>
					</template>
				</scroll-view>
				<view class="pop-btn app_flex-aic">
					<!-- <view class="reset app_flex-aicjcc">重置</view> -->
					<button class="pop-reset" hover-class="pop-btnHover">重置</button>
					<g-btn :customstyle="{width: '330rpx', height: '90rpx'}"></g-btn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: Boolean,
			customstyle: Object,
			list() {
				return []
			},
			activeindex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				showPopup: false,
				typeList: [],
				typeListChildren: []
			}
		},
		watch: {
			show(val) {
				this.showPopup = val
			},
			showPopup(val) {
				this.$emit('change', val)
			}
		},
		mounted() {
			this.updatePage()
		},
		methods: {
			async updatePage() {
				try {
					let typeList = await this.getProductTypeList()
					let typeListChildren = await this.getProductTypeChildren(typeList[0].id)
				} catch (e) {
					//TODO handle the exception
				}
			},
			onTypeListTap(index) {
				this.typeList.forEach((item, idx) => {
					item.active = index == idx
					if (index == idx) {
						this.typeListChildren = []
						this.getProductTypeChildren(item.id)
					}
				})
			},
			getProductTypeList() {
				return new Promise((resolve, reject) => {
					this.$g_api.productTypeList().then(({
						data
					}) => {
						if (data?.length > 0) {
							data = data.map((item, index) => {
								item.active = index == 0
								return item
							})
							this.typeList = data
							resolve(data)
						}
					})
				})
			},
			getProductTypeChildren(parentId) {
				return new Promise((resolve, reject) => {
					this.$g_api.productTypeChildren({
						parentId
					}).then(({
						data
					}) => {
						if (data?.length > 0) {
							data = this.$g_util.concatRequestUrl(data, 'icon')
							this.typeListChildren = data
							resolve(data)
						}
					})
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	::v-deep ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.pop {
		width: 610rpx;
		// padding: 0 30rpx;
		padding-top: var(--status-bar-height);

	}

	.pop-header {
		position: relative;
		padding: 0 30rpx;
		line-height: 98rpx;
		// border-bottom: 1px solid #e6e6e6;
		box-sizing: border-box;

		&::after {
			position: absolute;
			left: 30rpx;
			bottom: 0;
			content: '';
			width: 550rpx;
			border-bottom: 1px solid #e6e6e6;
		}
	}

	.pop-header-L {
		font-size: 28rpx;
		font-weight: bold;
	}

	.pop-header-R {
		text {
			margin-left: -20rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.pop-item-title {
		height: 80rpx;
		padding: 0 30rpx;

		&::after {
			transform: translateY(-70%) rotate(135deg);
		}
	}

	.pop-main {
		height: calc(100vh - 98rpx - 92rpx - 42rpx - var(--status-bar-height) - 14rpx);
	}

	.pop-item {
		&:last-child {
			margin-bottom: 20rpx;
		}
	}

	.pop-item-title {
		&::after {
			right: 34rpx;
			border-color: #333;
		}

		&.active {
			&::after {
				transform: rotate(-45deg);
			}
		}

		text {
			margin-left: -20rpx;
		}
	}

	.pop-item-main {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 14rpx 10rpx 30rpx;
	}

	.pop-item-main_item {
		font-size: 24rpx;
		line-height: 1;
		padding: 18rpx 36rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		background-color: #f2f2f2;

		&.active {
			border: 1px solid $g-main-color;
			color: $g-main-color;
			background-color: #fff;
		}
	}

	.pop-btn {
		padding-bottom: 40rpx;
		padding-top: 14rpx;

		.pop-reset {
			margin-left: 30rpx;
			margin-right: 16rpx;
			width: 200rpx;
			height: 90rpx;
			// line-height: 90rpx;
			border-radius: 46rpx;
			font-size: 32rpx;
			border: 1px solid #e6e6e6;
			background: #fff;
			box-sizing: border-box;
		}

		.pop-btnHover {
			background: #f9f9f9;
		}
	}
</style>
